<template>
<div>
  <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <span slot="center">
        支付
      </span>
    </topHeader>
  <div class="payInfo_box">
    <p>你共有<span>{{ free }}</span>元信息费未支付</p>
    <div class="pay_btn" @click="pay">支付</div>
  </div>
</div>  
</template>

<script>
import { WX_APPID } from './../../api/constant'
import topHeader from './../../components/topHeader'
import { payMoney, doPay, paySuccess } from '@/api/allapis'
export default {
  data () {
    return {
      free: '8'
    }
  },

  components: {
    topHeader
  },

  computed: {},

  mounted () {
    this.loadInforFree()
  },

  methods: {
    loadInforFree () {
      payMoney({ openid: this.$store.state.user.openid }).then(res => {
        this.free = res.data
      })
    },
    pay () {
      let self = this
      let params = {
        openID: this.$store.state.user.openid
      }
      doPay(params).then(res => {
        console.log(res)
        if (res) {
          self.$vux.loading.show({ text: '支付中' })
          self.$wechat.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: WX_APPID, // 必填，公众号的唯一标识
            timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signType, // 必填，签名，见附录1
            jsApiList: ['chooseWXPay']
          })
          self.$wechat.ready(() => {
            // 微信初始化成功后回调执行的
            // self.initWX = true
            self.$wechat.chooseWXPay({
              // 微信支付参数
              timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.paySign, // 支付签名
              success: function (respay) {
                // 支付成功后的回调函数
                self.$vux.loading.hide()
                paySuccess({ openid: self.$store.state.user.openid, remake: 'success' }).then(res => {
                  console.log(res)
                })
                self.$router.back()
              }
            })
          })
          self.$vux.loading.hide()
        } else {
          self.$vux.toast.show({
            text: res,
            type: 'warn'
          })
        }
      })
    },
    goMine () {
      this.$router.go(-1)
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./payinfo.less');
</style>